<template>
  <div>
    <van-nav-bar fixed title="支付详情" left-arrow @click-left="$utils.back($route.path);" />
    <div class="has-top">
      <div class="tac">
        <headPortrait-box class="br-full is-100 dis-inb mt-30" :head-portrait-url="headPortrait||''" />
      </div>
      <p class="tac color-gray-light">{{ StoreName }}</p>
      <p class="tac fs-44 fw-600">-{{ payMoney }}</p>
      <p class="tac color-gray-light">实付金额</p>
      <div class="mg-30 bg-white pos-r ptb-50 plr-40 br-20">
        <p class="fs-36">账单信息</p>
        <div class="hb list">
          <div v-for="(item,index) in payList" :key="index" class="flex fs-28 mtb-30">
            <p class="color-gray-light pr-20 list-title">{{ item.title }}</p>
            <p class>{{ item.value }}</p>
          </div>
        </div>
        <p class="fs-36">账单金额</p>
        <div class="list">
          <div v-for="(item,index) in orderList" :key="index" class="flex fs-28 mtb-30">
            <p class="color-gray-light pr-20 list-title">{{ item.title }}</p>
            <p class>{{ item.value }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headPortraitBox from 'components/headPortraitBox'
import { getUserCashierDetail } from 'api/order'
export default {
  components: {
    headPortraitBox
  },
  data() {
    return {
      headPortrait: require('assets/images/defaultHeadPortrait.png'),
      StoreName: '',
      payMoney: '',
      payList: [
        { title: '交易单号', value: '' },
        { title: '支付时间', value: '' },
        { title: '支付方式', value: '' }
      ],
      orderList: [
        { title: '订单金额', value: '' },
        { title: '优惠金额', value: '' },
        { title: '实付金额', value: '' }
      ]
    }
  },
  computed: {},
  created() {
    this.getUserCashierDetail()
  },
  methods: {
    getUserCashierDetail() {
      getUserCashierDetail(this.$route.params.id).then(res => {
        if (res) {
          const data = res.Data
          const _this = this
          const payList = _this.payList
          const orderList = _this.orderList
          _this.payMoney = data.PayMoney
          _this.StoreName = data.StoreName
          _this.headPortrait = data.Logo
          payList[0].value = data.Sn
          payList[1].value = data.OrderTime
          payList[2].value = data.PayWayName
          orderList[0].value = data.PriceSum
          orderList[1].value = data.CouponMoney
          orderList[2].value = data.PayMoney
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.list {
  div:last-child {
    padding-bottom: 40px;
  }
}
</style>
